import { useMediaQuery } from '@chakra-ui/react';
import React from 'react';

export default function NavBar(): JSX.Element {
  const [isLargerThanPhone] = useMediaQuery('(min-width: 800px)');

  return (
    <div style={{ display: 'flex', gap: '60px', position: 'absolute', top: '20px', right: '50px' }}>
      <a href="/">
        <img
          style={{ display: 'block' }}
          src="/img/лого.png"
          width = {isLargerThanPhone ? "100px" : "70px"}
          className="d-inline-block align-top"
          alt="Enjoy socks logo"
        />
      </a>
    </div>
  );
}
